<template>
  <div class="test-wrap" style="height: 1800px;">
    <v-form :form="form" layout="inline" class="form-style-two">
      <v-form-item label="formLabel.name">
        <v-input
          :readOnly="readOnly"
          ref="name"
          v-decorator="rules.name"
          :nextRef="formEnterJump.name"
          :disabled="formDisabled.name"
          @pressEnter="onKeyboardEnterPress"
          style="width: 120px"
        />
      </v-form-item>

      <v-form-item label="formLabel.phone">
        <v-input
          :readOnly="readOnly"
          ref="phone"
          v-decorator="rules.phone"
          :nextRef="formEnterJump.phone"
          :disabled="formDisabled.phone"
          @pressEnter="onKeyboardEnterPress"
          style="width: 120px"
        />
      </v-form-item>

      <v-form-item label="formLabel.inputNumber">
        <v-input-number :readOnly="readOnly" :min="1" :max="10" v-decorator="rules.numbervalue"></v-input-number>
      </v-form-item>

      <v-form-item label="formLabel.sex">
        <v-select
          style="width: 120px"
          ref="sex"
          v-decorator="rules.sex"
          :nextRef="formEnterJump.sex"
          @pressEnter="onKeyboardEnterPress"
          ><!--:readonly="readOnly" :disabled="formDisabled.sex" -->
          <v-select-option key="1">男</v-select-option>
          <v-select-option key="2">女</v-select-option>
          <v-select-option key="3">未知</v-select-option>
        </v-select>
      </v-form-item>

      <v-form-item label="formLabel.date">
        <v-date-picker
          :readOnly="readOnly"
          ref="date"
          v-decorator="rules.date"
          :nextRef="formEnterJump.date"
          :disabled="formDisabled.date"
          @pressEnter="onKeyboardEnterPress"
        ></v-date-picker>
      </v-form-item>

      <v-form-item label="formLabel.time">
        <v-time-picker
          :readOnly="readOnly"
          ref="time"
          v-decorator="rules.time"
          :nextRef="formEnterJump.time"
          :disabled="formDisabled.time"
          @pressEnter="onKeyboardEnterPress"
        ></v-time-picker>
      </v-form-item>

      <v-form-item label="formLabel.nationality">
        <autoTypewrit
          ref="nationality"
          :nextRef="formEnterJump.nationality"
          :disabled="formDisabled.nationality"
          backfillKey="nationality"
          :loadOptions="loadOptions"
          placeholder="搜索自动"
          inputWidth="200px"
          v-decorator="rules.nationality"
          transfer
          @pressEnter="onKeyboardEnterPress"
        ></autoTypewrit>
      </v-form-item>

      <v-form-item label="formLabel.addres">
        <v-cascader
          :readOnly="readOnly"
          ref="addres"
          :nextRef="formEnterJump.addres"
          :disabled="formDisabled.addres"
          :options="options"
          v-decorator="rules.addres"
          @pressEnter="onKeyboardEnterPress"
        ></v-cascader>
      </v-form-item>

      <v-form-item label="formLabel.region">
        <v-auto-complete
          :readOnly="readOnly"
          ref="region"
          :nextRef="formEnterJump.region"
          :disabled="formDisabled.region"
          :dataSource="dataSource"
          style="width: 200px"
          v-decorator="rules.region"
          @pressEnter="onKeyboardEnterPress"
        />
      </v-form-item>

      <v-form-item label="formLabel.type">
        <v-tree-select
          :readOnly="readOnly"
          ref="type"
          :nextRef="formEnterJump.type"
          style="width: 200px"
          :disabled="formDisabled.type"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          allowClear
          v-decorator="rules.type"
          treeDefaultExpandAll
          @select="onKeyboardEnterPress"
        >
          <v-tree-select-node value="parent 1" title="parent 1" key="0-1">
            <v-tree-select-node value="parent 1-0" title="parent 1-0" key="0-1-1">
              <v-tree-select-node value="leaf1" title="my leaf" key="random"></v-tree-select-node>
              <v-tree-select-node value="leaf2" title="your leaf" key="random1"></v-tree-select-node>
            </v-tree-select-node>
            <v-tree-select-node value="parent 1-1" title="parent 1-1" key="random2">
              <v-tree-select-node value="sss" key="random3">
                <b style="color: #08c" slot="title">sss</b>
              </v-tree-select-node>
            </v-tree-select-node>
          </v-tree-select-node>
        </v-tree-select>
      </v-form-item>

      <v-form-item label="formLabel.card">
        <v-radio-group
          ref="card"
          :readOnly="readOnly"
          :nextRef="formEnterJump.card"
          v-decorator="rules.card"
          :disabled="formDisabled.card"
          @pressEnter="onKeyboardEnterPress"
        >
          <v-radio value="a">是</v-radio>
          <v-radio value="b">否</v-radio>
        </v-radio-group>
      </v-form-item>

      <v-form-item label="formLabel.staff">
        <v-checkbox-group
          ref="staff"
          v-decorator="rules.staff"
          :nextRef="formEnterJump.staff"
          :disabled="formDisabled.staff"
          @pressEnter="onKeyboardEnterPress"
        >
          <v-checkbox value="A" :readOnly="readOnly">A0</v-checkbox>
          <v-checkbox value="B">A1</v-checkbox>
          <v-checkbox value="C">A2</v-checkbox>
        </v-checkbox-group>
      </v-form-item>

      <v-form-item>
        <v-radio :readOnly="readOnly">Hangzhou</v-radio>
        <v-radio-group defaultValue="a" :readOnly="readOnly">
          <v-radio-button value="a">Hangzhou</v-radio-button>
          <v-radio-button value="b">Shanghai</v-radio-button>
          <v-radio-button value="c">Beijing</v-radio-button>
          <v-radio-button value="d">Chengdu</v-radio-button>
        </v-radio-group>
      </v-form-item>
      <v-form-item>
        <v-button @click="handleSubmit2" type="primary">提交</v-button>
        <v-button @click="resetForm2" style="margin-left: 10px"> 重置 </v-button>
        <v-button @click="refreshForm" style="margin-left: 10px"> 刷新 </v-button>
      </v-form-item>
    </v-form>

    <!-- <v-layout>
      <v-layout-sider v-model="collapsed">
        <v-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
          <v-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
        </v-button>
        <menuDemo :menuList="menuJson" menuMode="inline" :selectedKeys="selectedKeys" />
      </v-layout-sider>
      <v-layout>
        <v-layout-header>Header</v-layout-header>
        <v-layout-content>
          <v-radio-group @change="onChangeMenu">
            <v-radio-button value="apply-in-add">申领单输入</v-radio-button>
            <v-radio-button value="outbound-order-entry">出库单输入</v-radio-button>
            <v-radio-button value="outpatient-prescription-comment">门诊处方点评</v-radio-button>
            <v-radio-button value="prescriptions-window-setting">审方工作台设定</v-radio-button>
          </v-radio-group>
        </v-layout-content>
        <v-layout-footer>
          <v-button type="primary">Primary</v-button>
          <v-button type="info">info</v-button>
          <v-button type="primary" disabled>Primary</v-button>
          <v-button type="info" disabled>info</v-button>
        </v-layout-footer>
      </v-layout>
    </v-layout> -->
  </div>
</template>

<script>
import menuDemo from "./sideMenu.vue";
import menuJson from "./menu.json";
export default {
  name: "test_index",
  components: { menuDemo },
  props: {},
  mixins: [],
  watch: {},
  computed: {},
  data() {
    return {
      readOnly: true,
      collapsed: false,
      menuJson,
      selectedKeys: "",
      loadOptions: {
        listUrl: "dataq/api/page/getInHosNationOrigDictList",
        headUrl: "dataq/api/header/getInHosNationOrigDictList",
      },
      dataSource: ["a", "aaa"],
      options: [
        {
          value: "zhejiang",
          label: "Zhejiang",
          children: [
            {
              value: "hangzhou",
              label: "Hangzhou",
              children: [
                {
                  value: "xihu",
                  label: "West Lake",
                },
              ],
            },
          ],
        },
        {
          value: "jiangsu",
          label: "Jiangsu",
          children: [
            {
              value: "nanjing",
              label: "Nanjing",
              children: [
                {
                  value: "zhonghuamen",
                  label: "Zhong Hua Men",
                },
              ],
            },
          ],
        },
      ],
      rulesFormModel: {
        name: "",
        phone: "",
        sex: "",
        date: null,
        time: null,
        nationality: "",
        addres: "",
        region: "",
        type: "",
        card: "",
        staff: [],
        numbervalue: 1,
      },
      rulesModel: {},
      formLabel: {},
      formShow: {},
      formDisabled: {},
      formEnterJump: {},
      formConfig: {
        rowMode: false,
        handlerNoNext() {
          console.log("到头了");
        },
      },

      rules: {
        sex: "1",
      },
      form: this.$form.createForm(this, { name: "coordinated" }), //
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    onChangeMenu(e) {
      this.selectedKeys = e.target.value;
    },
    init() {
      setTimeout(() => {
        this.rules = {
          name: [
            "name",
            { rules: [{ required: true, trigger: ["blur", "change"], message: "Please input Activity name" }] },
          ],
          phone: [
            "phone",
            {
              rules: [
                { required: true, trigger: ["blur", "change"], message: "Please input phone" },
                { trigger: ["blur", "change"], label: "电话", errorMsg: "Must be all digits" },
              ],
            },
          ],
          sex: ["sex"],
          date: ["date", { rules: [{ required: true, trigger: ["blur", "change"], message: "Please pick a date" }] }],
          time: ["time"],
          nationality: [
            "nationality",
            { rules: [{ required: true, trigger: ["blur", "change"], message: "国籍字段值不可为空" }] },
          ],
          addres: ["addres", { rules: [{ trigger: ["blur", "change"], label: "地址" }] }],
          region: ["region"],
          type: ["type"],
          card: ["card"],
          staff: ["staff"],
        };
      }, 3000);
    },
    onKeyboardEnterPress(e) {
      console.info(55555, e);
    },
    handleSubmit2() {
      console.info(11, this.form.getFieldsValue());
      this.form.validateFields((err, values) => {
        //AndScroll
        console.info(222, err, values);
        /* if (!err) {
          console.log("Received values of form: ", values);
        } */
      });
    },
    resetForm2() {
      this.form.resetFields();
    },
    refreshForm() {
      this.rules = {
        name: ["name"],
        phone: [
          "phone",
          {
            rules: [
              { required: true, trigger: ["blur", "change"], message: "Please input phone" },
              { trigger: ["blur", "change"], label: "电话", errorMsg: "Must be all digits" },
            ],
          },
        ],
        sex: ["sex"],
        date: ["date", { rules: [{ required: true, trigger: ["blur", "change"], message: "Please pick a date" }] }],
        time: ["time"],
        nationality: [
          "nationality",
          { rules: [{ required: true, trigger: ["blur", "change"], message: "国籍字段值不可为空" }] },
        ],
        addres: ["addres", { rules: [{ trigger: ["blur", "change"], label: "地址" }] }],
        region: ["region"],
        type: ["type"],
        card: ["card"],
        staff: ["staff"],
      };
    },
  },
  activated() {},
  deactivated() {},
};
</script>

<style lang="less" scoped></style>
